<template>
  <van-list>
    <van-cell
      v-for="component in componentsList"
      :key="component.path"
      :title="component.title"
      :to="component.path"
      is-link
      clickable
    />
  </van-list>
</template>

<script setup lang="ts">
import { MY_COMPONENTS_LIST } from '@/typings/vars'
import type { MyComponents } from '@/typings/types'

const componentsList = ref<MyComponents[]>(MY_COMPONENTS_LIST)
</script>

<style lang="scss" scoped>
:deep(.van-list) {
  padding: $uni-spacing-col-base;
  box-sizing: border-box;
}
:deep(.van-cell) {
  margin-bottom: $uni-spacing-col-base;
  font-weight: $uni-font-weight-base;
  border-radius: $uni-border-radius-base;
  background-color: $cell-bg-color;
  color: $uni-text-color-base;
  &::after {
    display: none;
  }
}
</style>
